@keyframes loading {
    from  {
        transform: rotateZ(0deg);
    }
    to {
        transform: rotateZ(360deg);
    }
}
body {
    background-color: #f2f2f2;
}
.layout {
    margin-top: 90/37.5rem;
    margin-bottom: 141/37.5rem;
    .header {
        width: 100%;
        height: 90/37.5rem;
        text-align: center;
        line-height: 90/37.5rem;
        font-size: 34/37.5rem;
        color: #fff;
        background-color: #141414;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        .backArrow {
            width: 40/37.5rem;
            height: 90/37.5rem;
            background: url("../../img/back_W@3x.png") no-repeat left center;
            background-size: 60/37.5rem 60/37.5rem;
            position: absolute;
            top: 0;
            left: 025/37.5rem;
        }
    }
    .loadingMarsk {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 5;
        background-color: rgb(255,255,255);
        .loadingPic {
            width: 72/37.5rem;
            height: 72/37.5rem;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -36/37.5rem;
            margin-left: -36/37.5rem;
            .rotatePic {
                width: 72/37.5rem;
                height: 72/37.5rem;
                position: fixed;
                top: 50%;
                left: 50%;
                margin-top: -36/37.5rem;
                margin-left: -36/37.5rem;
                animation: loading 1s linear infinite;
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            } 
            .centerPic {
                width: 62/37.5rem;
                height: 62/37.5rem;
                position: fixed;
                top: 50%;
                left: 50%;
                margin-top: -31/37.5rem;
                margin-left: -31/37.5rem;
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .orderDetail {
        .orderStatus {
            width: 100%;
            height: 80/37.5rem;
            margin-bottom: 20/37.5rem;
            background-color: #fff;
            .productSource {
                float: left;
                .ico {
                    float: left;
                    width: 42/37.5rem;
                    height: 42/37.5rem;
                    margin: 19/37.5rem 16/37.5rem 19/37.5rem 24/37.5rem;
                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                       
                    }
                }
                .text {
                    float: left;
                    height: 80/37.5rem;
                    line-height: 80/37.5rem;
                    font-size: 24/37.5rem;
                    color: #212121;
                }
            }
            .status {
                float: right;
                height: 80/37.5rem;
                line-height: 80/37.5rem;
                color: #ffa31a;
                font-size: 28/37.5rem;
                margin-right: 20/37.5rem;
            }
        }
        .orderMsg {
            background-color: #fff;
            margin-bottom: 20/37.5rem;
            .newlogistics {
                width: 100%;
                height: 110/37.5rem;
                .leftIcon {
                    float: left;
                    width: 120/37.5rem;
                    height: 110/37.5rem;
                    background: url("../../img/DD_orderplace@3x.png") no-repeat center center;
                    background-size: 72/37.5rem 72/37.5rem;
                }
                .center {
                    float: left;
                    width: 560/37.5rem;
                    height: 110/37.5rem;
                    border-bottom: 1px solid #ebebeb;
                    .logisticsText {
                        font-size: 24/37.5rem;
                        color: #1f1f1f;
                        margin-top: 20/37.5rem;
                        margin-bottom: 10/37.5rem;
                        span {
                            color: #a3a3a3;
                        }
                    }
                    .logisticsMsg {
                        font-size: 26/37.5rem;
                        color: #2fc231;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1; 
                    }
                }
                .rightIcon {
                    float: left;
                    width: 70/37.5rem;
                    height: 110/37.5rem;
                    border-bottom: 1px solid #ebebeb;
                    background: url("../../img/llgo@3x.png") no-repeat center center;
                    background-size: 42/37.5rem 42/37.5rem;
                }
            }
            .address {
                width: 100%;
                height: 170/37.5rem;
                .leftIcon {
                    float: left;
                    width: 120/37.5rem;
                    height: 170/37.5rem;
                    background: url("../../img/DD_place@3x.png") no-repeat center center;
                    background-size: 72/37.5rem 72/37.5rem;
                }
                .center {
                    float: left;
                    width: 560/37.5rem;
                    height: 170/37.5rem;
                    border-bottom: 1px solid #ebebeb;
                    .nameAndPhone {
                        margin-top: 30/37.5rem;
                        .name {
                            float: left;
                            font-size: 28/37.5rem;
                            color: #1f1f1f;
                        }
                        .phone {
                            float: right;
                            font-size: 28/37.5rem;
                            color: #1f1f1f;
                        }
                    }
                    .logisticsMsg {
                        font-size: 26/37.5rem;
                        color: #1f1f1f;
                        margin-top: 20/37.5rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2; 
                        span {
                            color: #a3a3a3;
                        }
                    }
                }
                .rightIcon {
                    float: left;
                    width: 70/37.5rem;
                    height: 170/37.5rem;
                    border-bottom: 1px solid #ebebeb;
                    background: url("../../img/llgo@3x.png") no-repeat center center;
                    background-size: 42/37.5rem 42/37.5rem;
                }
            }
            .buyMsg {
                height: 110/37.5rem;
                .leftIcon {
                    float: left;
                    width: 120/37.5rem;
                    height: 110/37.5rem;
                    background: url("../../img/DD_messages@3x.png") no-repeat center center;
                    background-size: 72/37.5rem 72/37.5rem;
                }
                .msg {
                    float: left;
                    width: 630/37.5rem;
                    height: 110/37.5rem;
                    .head {
                        font-size: 28/37.5rem;
                        color: #1f1f1f;
                        margin-top: 18/37.5rem;
                    }
                    .content {
                        font-size: 26/37.5rem;
                        color: #a3a3a3;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1; 
                    }
                }
            }
        }
        .productMsg {
            padding: 19/37.5rem;
            background-color: #fafafa;
            .productItem {
                margin-top: 20/37.5rem;
                position: relative;
                .productPic {
                    float: left;
                    width: 200/37.5rem;
                    height: 200/37.5rem;
                    border: 1px solid #ebebeb;
                    img {
                        display: block;
                        width: 100%;
                        height: 100%;
                    }
                }
                .productText {
                    float: left;
                    width: 415/37.5rem;
                    margin-left: 22/37.5rem;
                    .productName {
                        font-size: 26/37.5rem;
                        color: #141414;
                        margin: 18/37.5rem 0;
                    }
                    .productSize {
                        font-size: 22/37.5rem;
                        color: #bdbdbd;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                    }
                    .price {
                        font-size: 22/37.5rem;
                        color: #141414;
                        margin-top: 20/37.5rem;
                    }
                    .dcn {
                        font-size: 22/37.5rem;
                        margin-top: 20/37.5rem;
                        .cash {
                            padding-left: 10/37.5rem;
                        }
                    }
                }
                .productNum {
                    float: right;
                    font-size: 26/37.5rem;
                    color: #646464;
                    // margin-top: 160/37.5rem;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                }
            }
            .productItem:nth-of-type(1) {
                margin-top: 0;
            }
        }
        .pay {
            padding: 0 20/37.5rem;
            overflow: hidden;
            background-color: #fff;
            .totalPay,.wetChatPay,.redPay {
                .typeText {
                    float: left;
                    font-size: 28/37.5rem;
                    color: #141414;
                }
                .money {
                    float: right;
                    font-size: 28/37.5rem;
                    color: #a3a3a3;
                }
            }
            .totalPay {
                margin: 25/37.5rem 0 20/37.5rem;
            }
            .wetChatPay {
                margin-bottom: 20/37.5rem;
            }
            .redPay {
                margin-bottom: 25/37.5rem;
            }
        }
        .orderNumAndTime {
            width: 100%;
            height: 140/37.5rem;
            padding: 0 20/37.5rem;
            background-color: #fafafa;
            border-top: 1px solid #ebebeb;
            box-sizing: border-box;
            color: #a3a3a3;
            font-size: 28/37.5rem;
            .orderNum {
                span {
                    float: right;
                    padding: 0 30/37.5rem;
                    height: 50/37.5rem;
                    border: 1px solid #141414;
                    box-sizing: border-box;
                    line-height: 48/37.5rem;
                    color: #141414;
                    border-radius: 3px;
                    margin-top: 10/37.5rem;
                }
            }
            .orderNum,.orderTime {
                height: 70/37.5rem;
                line-height: 70/37.5rem;
            }
        }
        .orderBtn {
            width: 100%;
            height: 100/37.5rem;
            border-top: 1px solid #ebebeb;
            background-color: #fafafa;
            position: fixed;
            bottom: 0;
            left: 0;
            .payBtn,.cancleOrder,.sureCatchOrder,.commentBtn {
                float: right;
                width: 200/37.5rem;
                height: 64/37.5rem;
                border: 1px solid #bdbdbd;
                border-radius: 20px;
                box-sizing: border-box;
                margin-top: 18/37.5rem;
                a {
                    display: block;
                    color: #141414;
                    text-align: center;
                    line-height: 62/37.5rem;
                    font-size: 28/37.5rem;
                }
            }
            .payBtn {
                margin-right: 20/37.5rem;
                margin-left: 20/37.5rem;
                border: 1px solid #ffa31a;
                a {
                    color: #ffa31a;
                }
            }
        }
    }
    .tips {
        width: 400/37.5rem;
        height: 60/37.5rem;
        color: #fff;
        font-size: 26/37.5rem;
        text-align: center;
        line-height: 60/37.5rem;
        border-radius: 30/37.5rem;
        background-color: #141414;
        position: fixed;
        bottom: 250/37.5rem;
        left: 50%;
        margin-left: -200/37.5rem;
        display: none;
        opacity: 0;
    }
}